<template>
	<view>
		<text>{{ countDownText }}</text>
	</view>
</template>

<script>
	export default {
		props: {
			timestamp: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				countDownInterval: null,
				currentTime: 0
			};
		},
		computed: {
			countDownText() {
				let timeLeft = this.timestamp - this.currentTime;
				if (timeLeft < 0) {
					this.clearCountDown();
					return '时间已经过去';
				}
				let hours = Math.floor(timeLeft / 3600);
				let minutes = Math.floor((timeLeft % 3600) / 60);
				let seconds = timeLeft % 60;
				return `${hours}小时${minutes}分钟${seconds}秒`;
			}
		},
		created() {
			this.currentTime = Math.floor(Date.now() / 1000);
			this.startCountDown();
		},
		methods: {
			startCountDown() {
				this.countDownInterval = setInterval(() => {
					this.currentTime = Math.floor(Date.now() / 1000);
				}, 1000);
			},
			clearCountDown() {
				if (this.countDownInterval) {
					clearInterval(this.countDownInterval);
				}
			}
		},
		beforeDestroy() {
			this.clearCountDown();
		}
	};
</script>

<style lang="scss">

</style>